<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/axios-interceptors.js"></script>
    <script src="../js/vue3.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <link href="../css/index.css" rel="stylesheet"/>
    <style>
        body {
            background-color: #f5f7fa;
            padding: 20px;
            font-family: "Microsoft YaHei", sans-serif;
        }
        .log-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
            padding: 20px;
        }
        .btn-group {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
        }
        .el-table .el-button {
            margin-right: 5px;
            border-radius: 4px;
            transition: all 0.2s;
        }
        .delete-btn:hover {
            color: #f78989;
        }
        .pagination-block {
            margin-top: 16px;
        }
        .log-table {
            border-radius: 8px;
            overflow: hidden;
        }
        .el-table th {
            background-color: #f0f7ff;
            color: #333;
            font-weight: 500;
            border-bottom: 1px solid #e6f7ff;
        }
        .el-table td {
            border-bottom: 1px solid #f5f7fa;
        }
        .el-button {
            transition: all 0.3s;
        }
        .el-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* 关键样式：限制内容显示 */
        .data-content {
            white-space: nowrap; /* 不换行 */
            overflow: hidden;    /* 超出隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
        }

        /* 确保表格容器可滚动，避免整体变形 */
        .log-table {
            width: 100%;
            overflow-x: auto;
        }
        .log-view-wrapper {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .log-view-card {
            border-radius: 8px;
            overflow: hidden;
        }

        .card-header {
            padding: 16px 20px;
            border-bottom: 1px solid #eee;
        }

        .card-header h2 {
            margin: 0;
            font-size: 18px;
            color: #303133;
        }

        .log-descriptions {
            margin-top: 15px;
        }

        .el-descriptions__label {
            font-weight: 500;
            background-color: #f5f7fa;
        }

        .code-block {
            position: relative;
            background-color: #f5f7fa;
            border-radius: 4px;
            padding: 12px;
            overflow-x: auto;
        }

        .code-block pre {
            margin: 0;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 14px;
            line-height: 1.5;
            color: #303133;
        }

        .long-text-block {
            max-height: 400px;
            overflow-y: auto;
        }

        .text-count {
            position: sticky;
            bottom: 0;
            right: 8px;
            text-align: right;
            font-size: 12px;
            color: #606266;
            padding-top: 8px;
            border-top: 1px dashed #e4e7ed;
        }

        .text-break {
            word-break: break-all;
        }

    </style>
</head>
<body>
<div id="app" class="log-container">
    <h3>日志记录表</h3>
    <div class="btn-group">
        <el-button type="danger" @click="batchDelete">批量删除</el-button>
    </div>
<!-- 数据表格   -->
    <div>
        <el-table
                :data="logs"
                class="log-table"
                border
                stripe
                show-overflow-tooltip
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="编号" prop="id" width="80" align="center"></el-table-column>
            <el-table-column label="请求类型" prop="reqType" min-width="100"></el-table-column>
            <el-table-column label="请求地址" prop="reqUrl" min-width="200"></el-table-column>
            <el-table-column label="全类名" prop="fullClass" min-width="200"></el-table-column>
            <el-table-column label="请求方式" prop="method" min-width="150"></el-table-column>
            <el-table-column label="请求参数" prop="reqParams" min-width="150"></el-table-column>
            <!-- 修改响应数据列，添加可拖动属性 -->
            <el-table-column
                    label="响应数据"
                    prop="respData"
                    min-width="200"
                    max-width="800"
                    resizable
            >
                <template #default="scope">
                    <div class="data-content">{{ scope.row.respData }}</div>
                </template>
            </el-table-column>
            <el-table-column label="时间" prop="optTime" min-width="150"></el-table-column>
            <el-table-column align="center" label="操作" width="100">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleCheck(scope.row)">查看</el-button>
                    <el-button
                            size="small"
                            type="danger"
                            class="delete-btn"
                            @click="handleDelete(scope.row)"
                    >
                        删除
                    </el-button>


                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>

<!--  查看弹窗  -->
        <div class="log-view-wrapper">
            <el-dialog title="日志详情"
                       v-model="dialogVisible"
                       width="450px">
            <el-card class="log-view-card" shadow="hover">
                <el-descriptions column="1" border class="log-descriptions">
                    <!-- 编号和请求类型 -->
                    <el-descriptions-item label="编号">{{ formData.id }}</el-descriptions-item>
                    <el-descriptions-item label="请求类型">{{ formatReqType(formData.reqType) }}</el-descriptions-item>

                    <!-- 请求地址和全类名 -->
                    <el-descriptions-item label="请求地址">
                        <div class="text-break">{{ formData.reqUrl }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="全类名">
                        <div class="text-break">{{ formData.fullClass }}</div>
                    </el-descriptions-item>

                    <!-- 请求方式和操作时间 -->
                    <el-descriptions-item label="请求方式">{{ formData.method }}</el-descriptions-item>
                    <el-descriptions-item label="操作时间">{{ formData.optTime }}</el-descriptions-item>

                    <!-- 请求参数 -->
                    <el-descriptions-item label="请求参数">
                        <div class="code-block">
                            <pre>{{ formatJson(formData.reqParams) }}</pre>
                        </div>
                    </el-descriptions-item>

                    <!-- 响应数据（长文本处理） -->
                    <el-descriptions-item label="响应数据">
                        <div class="code-block long-text-block">
                            <pre>{{ formatJson(formData.respData) }}</pre>
                            <div class="text-count">
                                {{ formData.respData ? formData.respData.length : 0 }} 字符
                            </div>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-dialog>
    </div>

</div>

<script>
    const { createApp, reactive, ref, onMounted } = Vue;
    const { ElMessage, ElMessageBox } = ElementPlus;

    const app = createApp({
        setup() {
            const pageNum = ref(1);
            const pageSize = ref(5);
            const total = ref(0);

            //table源数据
            const logs = ref([]);

            //查看弹窗显示
            const dialogVisible=ref(false);
            //弹窗数据绑定
            const formData= ref({});
            const handleCheck=(row)=>{
                formData.value={...row}
                dialogVisible.value= true;
            }

            // 格式化请求类型显示文本
            const formatReqType = (type) => {
                if (!type) return '';
                const typeMap = {
                    'interface': '接口调用',
                    'page': '页面访问',
                    'sync': '数据同步',
                    'system': '系统操作'
                };
                return typeMap[type] || type;
            };

            // 格式化JSON显示
            const formatJson = (jsonStr) => {
                if (!jsonStr) return '';
                try {
                    // 如果是JSON字符串则格式化
                    const obj = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr;
                    return JSON.stringify(obj, null, 2);
                } catch (e) {
                    // 不是JSON则直接返回
                    return jsonStr;
                }
            };
            //选中行数据
            const multipleSelection = ref([]);

            // 处理表格选中项变化（更新选中的行数据)
            const handleSelectionChange = (val) => {
                multipleSelection.value = val;
            };

            //批量删除选中的日志记录
            const batchDelete = () => {
                if (multipleSelection.value.length === 0) {
                    ElMessage.warning("请选择需要删除的记录");
                    return;
                }

                ElMessageBox.confirm('将永久删除选中的日志信息. 确定?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    const ids = multipleSelection.value.map(item => item.id);
                    axios.delete("/log/deleteLogs", { data: ids })
                        .then((resp) => {
                            if (resp.data.code === 200) {
                                getLogs();
                                ElMessage.success("删除成功");
                            }
                        })
                        .catch(error => {
                            ElMessage.error(error.data.response.msg);
                        });
                }).catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消批量删除',
                    });
                });
            };

            //删除摁钮功能
            const handleDelete =(row)=>{
                axios.delete(`/log/deleteLog/${row.id}`).then(resp=>{
                    if(resp.value.code===200){
                        ElMessage.success(resp.value.msg);
                    }
                }).catch(error=>{
                    ElMessage.error(error.data.response.msg);
                })
            }

            //分页
            const handleSizeChange = (val) => {
                pageSize.value = val;
                getLogs();
            };
            const handleCurrentChange = (val) => {
                pageNum.value = val;
                getLogs();
            };

            //获取分页数据
            const getLogs=()=>{
                axios.get(`/log/${pageNum.value}/${pageSize.value}`).then(resp=>{
                    if (resp.data.code === 200) {
                        logs.value = resp.data.obj.data;
                        total.value = resp.data.obj.total;
                    }
                }).catch(error=>{
                    ElMessage.error(error.data.response.msg)})

            }
            onMounted(() => {
                getLogs();
            });

            return {
                logs,
                pageNum,
                pageSize,
                total,
                dialogVisible,
                formData,
                handleDelete,
                batchDelete,
                handleSelectionChange,
                handleSizeChange,
                handleCurrentChange,
                getLogs,
                handleCheck,
                formatReqType,
                formatJson,

            };
        }
    });

    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });

    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }

    app.mount('#app');
</script>
</body>
</html>